<template>
  <div class="app-container">
    <el-form :inline="true" @submit.native.prevent>
      <el-form-item>
        <all-product-series-cascade @change="productChange" />
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="deviceName"
          clearable
          :placeholder="$t('device')+$t('name')"
          @change="searchNameChange"
        />
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="phoneNumber"
          clearable
          :placeholder="$t('cardNumber')"
          @change="phoneNumberChange"
        />
      </el-form-item>
      <el-form-item>
        <el-select v-model="status" @change="statusChange">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <province-city-cascade @change="provinceCityChange" />
      </el-form-item>
      <el-form-item>
        <el-select v-model="gridNum" @change="gridNumChange">
          <el-option
            v-for="item in gridList"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          v-if="warnDesc"
          icon="el-icon-warning"
          type="primary"
          @click="unWarnDescDevices"
        />
        <el-button
          v-else
          icon="el-icon-warning-outline"
          plain
          @click="warnDescDevices"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="extendSearch?'el-icon-caret-top':'el-icon-caret-bottom'"
          @click="extendSearch = !extendSearch"
        >{{ $t('extend')+$t('search') }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-popover
          placement="bottom"
          width="250"
          trigger="hover"
        >
          <div>
            <div class="config-item">
              <div style="line-height: 30px;font-size:15px" class="primary-color">{{ $t('show')+$t('param') }}</div>
              <el-switch
                v-model="showParamList"
                style="margin-top: 5px"
                active-value="1"
                inactive-value="0"
                @change="showParamListChange"
              />
            </div>
            <div class="config-item">
              <div style="line-height: 30px;font-size:15px" class="primary-color">{{ $t('show')+$t('explain') }}</div>
              <el-switch
                v-model="showExplainList"
                style="margin-top: 5px"
                active-value="1"
                inactive-value="0"
                @change="showExplainListChange"
              />
            </div>
          </div>
          <el-button
            slot="reference"
            icon="el-icon-s-tools"
            type="primary"
          />
        </el-popover>
      </el-form-item>
      <el-form-item>
        <el-button
          :icon="model === 'list' ? 'el-icon-news':'el-icon-tickets'"
          type="primary"
          @click="modelChange()"
        />
      </el-form-item>
    </el-form>
    <all-device-search v-show="extendSearch" style="margin-top: 10px;width: 1100px" @change="searchChange" />
    <el-row :gutter="5">
      <el-col v-for="(item,index) in deviceList" :key="index" :span="24 / gridNum">
        <grid-device :device="item" :show-param-list="showParamList" :show-explain-list="showExplainList" />
      </el-col>
      <el-col
        v-if="model === 'hand'"
        :span="24 / gridNum"
      >
        <div style="height: 420px;margin-top: 10px;margin-left: 5px;margin-right: 5px;border-radius: 8px;box-shadow: 1px 2px 12px 0 rgba(0, 0, 0, 0.1)">
          <div
            style="display: flex;justify-content: center;align-items: center;height: 340px;"
          >
            <el-button
              size="medium"
              circle
              icon="el-icon-plus"
              @click="showAddDevice"
            />
          </div>
        </div>
      </el-col>
    </el-row>
    <div v-if="model === 'list'" style="text-align: right;margin: 5px 0">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>

import {
  listDeviceStatus
} from '@/util/common'
import {
  getDevice,
  pageGetAllDevice
} from '@/api/iot/iotDeviceApi'

import AllProductSeriesCascade from '@/components/AllProductSeriesCascade'
import ProvinceCityCascade from '@/components/ProvinceCityCascade'
import AllDeviceSearch from '@/components/AllDeviceSearch'
import GridDevice from '@/components/GridDevice'
import {
  getGridNum,
  setGridNum,
  setShowParamList,
  getShowParamList,
  getShowExplainList,
  setShowExplainList, setSearchDeviceName, setSearchDeviceStatus, getSearchDeviceStatus, getSearchDeviceName
} from '@/util/storage'
import { getPageSize, setPageSize } from '@/util/storage'
export default {
  name: 'GridModel',
  components: {
    AllProductSeriesCascade,
    ProvinceCityCascade,
    AllDeviceSearch,
    GridDevice
  },
  data() {
    return {
      showParamList: getShowParamList(),
      showExplainList: getShowExplainList(),
      extendSearch: false,
      gridNum: getGridNum(),
      gridList: [1, 2, 3, 4, 6, 8, 12, 24],
      status: getSearchDeviceStatus(),
      statusList: [],
      deviceList: [],
      currentPage: 0,
      total: 0,
      pageSize: getPageSize(),
      provinceId: null,
      cityId: null,
      productId: null,
      seriesId: null,
      deviceName: getSearchDeviceName(),
      phoneNumber: null,
      dialogLocalVisible: false,
      userName: null,
      activeNames: null,
      search: null,
      warnDesc: null,
      model: 'list'
    }
  }, created() {
    this.statusList = listDeviceStatus(this)
    this.pageGetAllDevice()
  },
  methods: {
    showAddDevice() {
      this.$prompt(this.$t('deviceCore'), '', {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel')
      }).then(({ value }) => {
        getDevice({
          deviceCore: value
        }).then(res => {
          const { code, data } = res
          if (code === '200') {
            this.deviceList.unshift(data)
          }
        })
      })
    },
    modelChange() {
      if (this.model === 'list') {
        this.model = 'hand'
        this.deviceList = []
      } else {
        this.model = 'list'
        this.pageGetAllDevice()
      }
    },
    showParamListChange() {
      setShowParamList(this.showParamList)
      this.pageGetAllDevice()
    },
    showExplainListChange() {
      setShowExplainList(this.showExplainList)
      this.pageGetAllDevice()
    },

    gridNumChange() {
      setGridNum(this.gridNum)
    },
    searchChange(item) {
      this.search = item
      this.pageGetAllDevice()
    },
    provinceCityChange(item) {
      this.provinceId = item.provinceId
      this.cityId = item.cityId
      this.currentPage = 1
      this.pageGetAllDevice()
    },
    handleChange(val) {
      this.activeNames = val
    },
    statusChange() {
      this.currentPage = 1
      this.pageGetAllDevice()
      setSearchDeviceStatus(this.status)
    },
    warnDescDevices() {
      this.currentPage = 1
      this.warnDesc = true
      this.pageGetAllDevice()
    },
    unWarnDescDevices() {
      this.currentPage = 1
      this.warnDesc = null
      this.pageGetAllDevice()
    },
    productChange(val) {
      this.productId = val.productId
      this.seriesId = val.seriesId
      this.currentPage = 1
      this.pageGetAllDevice()
    },
    searchNameChange() {
      this.currentPage = 0
      this.pageGetAllDevice()
      setSearchDeviceName(this.deviceName)
    },
    handleSizeChange(val) {
      this.pageSize = val
      setPageSize(this.pageSize)
      this.pageGetAllDevice()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.pageGetAllDevice()
    },

    pageGetAllDevice() {
      const json = {
        productId: this.productId,
        seriesId: this.seriesId,
        pageSize: this.pageSize,
        currentPage: this.currentPage,
        status: this.status,
        phoneNumber: this.phoneNumber,
        provinceId: this.provinceId,
        cityId: this.cityId,
        search: this.search,
        warnDesc: this.warnDesc
      }
      if (this.deviceName != null && this.deviceName !== '') {
        json.deviceName = this.deviceName
      }
      pageGetAllDevice(json).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.total = data.total
          this.deviceList = data.data
        }
      })
    },
    phoneNumberChange() {
      this.currentPage = 0
      this.pageGetAllDevice()
    }
  }
}
</script>

